<!--  -->
<template>
    <div style="display: flex;justify-content: space-between;">
        <a-form size="small" :model="form" layout="inline">
            <a-form-item label="乐捐项目">
                <a-input allow-clear :style="{ width: '180px' }" class="bacClass" placeholder=""
                    v-model="form.donateProject" />
            </a-form-item>
        </a-form>
        <Toolbar :items="[
            `查询`, '新增', '删除',]" @select="cx" @add="adds" @del="delSles">
        </Toolbar>
    </div>
    <div class="gang"></div>
    <div style="height:91.5%;margin-top:10px">
        <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
            :suppressDragLeaveHidesColumns="true" rowSelection="multiple" @grid-ready="gridReady"
            style="height: calc(100% - 45px)" :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="dataList"
            :columnDefs="tc" :localeText="localeText1"></AgGridVuesCopys>
        <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
            @change="PageSize" @page-size-change="change1" style="justify-content: center" :page-size="size"
            :current="page" />
    </div>

    <a-drawer style="z-index: 999" ok-text="保存" cancel-text="关闭" :drawer-style="{ zIndex: 9999 }" :mask-closable="false"
        :width="400" :visible="pageData.showAdd" unmountOnClose @ok="sideOk" @cancel="pageData.showAdd = false">
        <template #title>
            {{ pageData.sideTitle }}
        </template>
        <div>
            <a-form ref="formRef" layout="horizontal" :model="dataForm">
                <!-- <a-form-item label-col-flex="80px" label="客户" field="customName"
                    :rules="[{ required: true, message: '客户必填' }]" :validate-trigger="['change', 'blur']">
                    <a-select popup-container="html"  class="bacClass" v-model="dataForm.customName" allow-clear allow-search @click="mtClick('')" @search="mtClick">
                        <a-option v-for="item in mtList" :value="item.brandName">
                            {{ item.brandName }}
                        </a-option>
                    </a-select>
                </a-form-item> -->
                <a-form-item label-col-flex="100px" label="乐捐项目" field="donateProject"
                    :rules="[{ required: true, message: '乐捐项目必填' }]" :validate-trigger="['change', 'blur']">
                    <a-input class="bacClass" placeholder="" v-model="dataForm.donateProject" />
                </a-form-item>
                <a-form-item label-col-flex="100px" label="乐捐最小值" field="minDonateValue"
                    :rules="[{ required: true, message: '乐捐最小值必填' }]" :validate-trigger="['change', 'blur']">
                    <a-input-number class="bacClass" placeholder="" v-model="dataForm.minDonateValue" :precision="2" />
                </a-form-item>
                <a-form-item label-col-flex="100px" label="乐捐最大值" field="maxDonateValue"
                    :rules="[{ required: true, message: '乐捐最大值必填' }]" :validate-trigger="['change', 'blur']">
                    <a-input-number class="bacClass" placeholder="" v-model="dataForm.maxDonateValue" :precision="2" />
                </a-form-item>
                <a-form-item label-col-flex="100px" label="乐捐单价" field="donatePrice"
                    :rules="[{ required: true, message: '乐捐单价必填' }]" :validate-trigger="['change', 'blur']">
                    <a-input-number class="bacClass" placeholder="" v-model="dataForm.donatePrice" :precision="2" />
                </a-form-item>
                <a-form-item label-col-flex="100px" label="金额上限" field="amountUpper"
                    :rules="[{ required: true, message: '金额上限必填' }]" :validate-trigger="['change', 'blur']">
                    <a-input-number class="bacClass" placeholder="" v-model="dataForm.amountUpper" :precision="2" />
                </a-form-item>
                <a-form-item label-col-flex="100px" label="备注" field="remark">
                    <a-input class="bacClass" placeholder="" v-model="dataForm.remark" />
                </a-form-item>
            </a-form>
        </div>
    </a-drawer>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref, onMounted } from 'vue'
import Toolbar from '@/components/Toolbar.vue'
import { post, get } from '@/api/http'
import { Message, Modal } from '@arco-design/web-vue'

import { localeText } from '@/api/aggridZw'
import { pagingList } from '@/api/paging'

const pagingList1: any = ref(pagingList)
const localeText1: any = ref(localeText)

const form: any = reactive({
    donateProject: ''
})

const defaultColDef: any = {
    sortable: true,
    resizable: true,
    filter: true,
}
const gridOption = ref()
const colState = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
    colState.value = params.columnApi
}

const total = ref(0);
const page = ref(1);
const size = ref(10);
function PageSize(val: any) {
    page.value = val
    doRefresh();
}
function change1(val: any) {
    size.value = val
    doRefresh();
}

const dataList: any = ref([])

function doRefresh() {
    form.pageLoading = true
    post({
        url: "pieceData/AutomaticDonate/getPage",
        data: {
            page: page.value,
            size: size.value,
            donateProject: form.donateProject
        },
    })
        .then(({ data, code }: any) => {
            if (code === 200) {
                dataList.value = data.list
                gridOption.value.setRowData(data.list)
                total.value = data.total;
            }
        })
        .catch(console.log).finally(() => {
            form.pageLoading = false
        })
}


const cx = () => {
    page.value = 1
    doRefresh()
}

onMounted(() => {
    pageData.rHeight = document.getElementsByClassName("main-section")[0]?.clientHeight
    //弹出层的高
    if (pageData.rHeight !== undefined) {
        pageData.rHeight = pageData.rHeight;
    }
    doRefresh()
})
const pageData: any = reactive({
    showAdd: false,
    rHeight: 0,
    sideTitle: '新增'
})

const dataForm: any = reactive({
    donateProject: '',
    minDonateValue: '',
    maxDonateValue: '',
    donatePrice: '',
    amountUpper: '',
    remark: '',
})

const tableColumns: any = [
    {
        title: "乐捐项目",
        key: "donateProject",
        dataIndex: "donateProject",
        width: 150,
    },
    {
        title: "乐捐最小值",
        key: "minDonateValue",
        dataIndex: "minDonateValue",
        width: 150,
    },
    {
        title: "乐捐最大值",
        key: "maxDonateValue",
        dataIndex: "maxDonateValue",
        width: 150,
    },
    {
        title: "乐捐单价",
        key: "donatePrice",
        dataIndex: "donatePrice",
        width: 150,
    },
    {
        title: "金额上限",
        key: "amountUpper",
        dataIndex: "amountUpper",
        width: 150,
    },
    {
        title: "备注",
        key: "remark",
        dataIndex: "remark",
        width: 150,
    },
    {
        title: "是否生效",
        key: "assertState",
        dataIndex: "assertState",
        width: 150,
        fixed: 'right'
    },
    {
        title: "创建人",
        key: "createName",
        dataIndex: "createName",
        width: 150,
    },
    {
        title: "创建时间",
        key: "createTime",
        dataIndex: "createTime",
        width: 150,
    },
    {
        title: "修改人",
        key: "updateName",
        dataIndex: "updateName",
        width: 150,
    },
    {
        title: "修改时间",
        key: "updateTime",
        dataIndex: "updateTime",
        width: 150,
    },
    {
        title: "操作",
        key: "alites",
        dataIndex: "alites",
        slotName: 'alites',
        width: 80,
        fixed: 'right'
    }
]


let tc: any[] = tableColumns.map((o: any) => {

    let obj = {
        headerName: o.title,
        field: o.key,
        pinned: o['fixed'],
    }
    if (o.key === 'alites') {
        obj['resizable'] = false
        obj['filter'] = false
        obj['sortable'] = false
        obj["lockPosition"] = "right"
        obj['width'] = 100
        obj['cellRenderer'] = {
            template: `<el-button style="color:#165dff;" link @click="a1" >修改</el-button>`,
            setup(props: any) {
                const a1 = () => {
                    for (let item in props.params.data) {
                        dataForm[item] = props.params.data[item]
                    }
                    pageData.showAdd = true
                    pageData.sideTitle = '修改'
                }
                return {
                    a1,
                }
            }

        }
    }
    if (o.key === 'assertState') {
        obj['resizable'] = false
        obj['filter'] = false
        obj['sortable'] = false
        obj["lockPosition"] = "right"
        obj['width'] = 150
        obj['cellRenderer'] = {
            template: ` <a-dropdown   @select="c($event)">
                <a-button  v-if="b == 1" type="primary" size="mini"
                    status="success" shape="round">
                    是
                    <icon-down />
                </a-button>
                <a-button v-if="b == 0" status="danger" size="mini"
                    shape="round">
                    否
                    <icon-down />
                </a-button>
                <template #content>
                    <a-doption>否</a-doption>
                    <a-doption>是</a-doption>
                </template >
               
            </a-dropdown>`,
            setup(props: any) {
                const b = ref(props.params.data.assertState)
                const c = (e: any) => {
                    e == '是' ? (Modal.confirm({
                        title: '系统提示',
                        content: '是否改为当前行生效?',
                        onOk: () => {
                            post({
                                url: 'pieceData/AutomaticDonate/setAssertState',
                                data: {
                                    donateProject: props.params.data.donateProject,
                                    assertState: 1
                                },
                            }).then((res: any) => {
                                if (res.code == 200) {
                                    Message.success('修改成功')
                                    doRefresh()
                                } else Message.error(res.message)
                            })
                        },
                    })) : post({
                        url: 'pieceData/AutomaticDonate/setAssertState',
                        data: {
                            donateProject: props.params.data.donateProject,
                            assertState: 0
                        },
                    }).then((res: any) => {
                        if (res.code == 200) {
                            Message.success('修改成功')
                            doRefresh()
                        } else Message.error(res.message)
                    })
                }
                return {
                    b,
                    c,
                }
            }

        }
    }

    return obj
})

let a = [{
    showRowGroup: 'hide_def',
    "headerName": "",
    "checkboxSelection": true,
    "headerCheckboxSelection": true,
    "pinned": "left",
    "width": 50,
    resizable: false,
    filter: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 50,
    lockPosition: "left",
}]
tc = a.concat(tc)


const adds = () => {
    if (dataForm.id) {
        delete dataForm.id
    }
    for (let item in dataForm) {
        dataForm[item] = ''
    }
    pageData.showAdd = true
    pageData.sideTitle = '新增'
}

const formRef = ref()

const sideOk = () => {
    formRef.value?.validate().then((err) => {
        if (!err) {
            if (pageData.sideTitle == '新增') {
                post({
                    url: 'pieceData/AutomaticDonate/insert',
                    data: [dataForm]
                }).then(({ code, message }) => {
                    if (code == 200) {
                        Message.success('成功')
                        pageData.showAdd = false
                        doRefresh()
                    } else {
                        Message.error(message)
                    }
                })
            } else {
                post({
                    url: 'pieceData/AutomaticDonate/update',
                    data: [dataForm]
                }).then(({ code, message }) => {
                    if (code == 200) {
                        Message.success('成功')
                        pageData.showAdd = false
                        doRefresh()
                    } else {
                        Message.error(message)
                    }
                })
            }
        }
    })
}

const delSles = () => {
    if (gridOption.value.getSelectedRows().length == 0) {
        Message.error('请勾选数据')
        return false
    }
    Modal.confirm({
        title: '系统提示',
        content: '确认删除选中的数据?',
        onOk: () => {
            post({
                url: 'pieceData/AutomaticDonate/delete',
                data: gridOption.value.getSelectedRows().map((res: any) => res.id),
            }).then((res: any) => {
                if (res.code == 200) {
                    Message.success('删除成功')
                    doRefresh()
                } else Message.error(res.message)
            })
        },
    })
}

// const mtList = ref()

// const mtClick = (val:any) => {
//     post({
//         url: 'pieceData/Brand/getFieldValue',
//         data: { "deleteState": 0,brandName:val}
//     }).then(({ data }) => {
//         mtList.value = data
//     })
// }

</script>
<style lang='less' scoped>
:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

:deep(.arco-table-td-content) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>